<template>
  <transition name="fade-transform" mode="out-in">

  <div class="social-card__wrap" v-if="showCard">
    <div class="social-card">
      <div class="card_header">
        <div class="header-l">
          <yun-avatar :userId="userId" :src="userAvatar" :name="userNick"></yun-avatar>
          <div class="header-l__info">
            <div class="header-l__info-top">
              <p class="name" @click="changeRoute2('/u/'+userId+'/blog')">{{userNick}}</p>
              <p class="follow1" v-if="followedAuthor&&$store.state.userProfile.userId!==userId" >
                <yun-icon name="right"></yun-icon>已关注
              </p>
              <p class="follow2" v-if="!followedAuthor" @click="dataPostFollowUser">
                <yun-icon name="loading" v-if="followLoading"></yun-icon><span v-if="!followLoading">+</span>关注
              </p>
            </div>

            <div class="header-l__info-bottom">
              <p class="date">{{createTime}}</p>
<!--              <p class="limits">该动态仅自己可见</p>-->
            </div>
          </div>
        </div>

        <div class="header-r">
          <yun-icon v-if="userId===$store.state.userProfile.userId&&status!==-1" name="down_arrow" size="6px" color="#999" @click.native.stop="clickToShowDrop"></yun-icon>
          <p v-if="isMy&&status===-1" class="label-box__err">被锁定</p>
          <dropdown v-if="showDrop">
            <li @click="showAlert(postId)" ref="deleteButton">删除</li>
          </dropdown>
        </div>
      </div>

      <p class="card-content__word" v-html="handledContent"></p>

      <div class="card-content__img1" v-if="pictures.length>1&&pictures.length<=4&&!showBanner">
        <div class="img-box" @click="clickToOpenBanner(index)" v-for="(value,index) in pictures"
             :style="{marginRight:(index+1)===4?'0':'16px'}">
          <img :src="value" alt="">
      </div>
    </div>


      <div class="card-content__img2" v-if="imgArr2.length>4&&!showBanner">
        <div class="img-box" @click="clickToOpenBanner(index)" v-for="(value,index) in imgArr2" :style="{marginRight:(index+1)%3===0?'0':'16px'}">
          <img :src="value" alt="">
          <p class="abs" v-if="index===8&&pictures.length>9">+{{pictures.length-imgArr2.length}}</p>
        </div>
      </div>

      <div class="card-content__img3" v-if="imgArr2.length===1&&!showBanner&&!longImg">
        <div class="img-box" @click="clickToOpenBanner(index)" v-for="(value,index) in imgArr2" :style="{marginRight:(index+1)%3===0?'0':'16px'}">
          <img :src="value" alt="">
        </div>
      </div>


      <div class="card-content__img4" v-if="imgArr2.length===1&&!showBanner&&longImg">
        <div class="img-box" @click="clickToOpenBanner(index)" v-for="(value,index) in imgArr2" :style="{marginRight:(index+1)%3===0?'0':'16px'}">
          <img :src="value" alt="">
          <p class="abs">长图</p>
        </div>
      </div>
      <p class="pack-up" v-if="showBanner" @click="showBanner=false">
        收起        <yun-icon style="transform: rotate(180deg)" name="down_arrow" size="8px" pb="0px"></yun-icon>
      </p>
      <banner v-if="showBanner" :currentImg2="currentImg" style="padding-top: 16px"  :autoPlay=false :bannerType=2 :imgArr="pictures"></banner>

<!--      <video controls v-if="video" class="dynamic-video" >-->

<!--        <source :src="video" type="video/mp4">-->
<!--        <source :src="video" type="video/ogg">-->
<!--        <source :src="video" type="video/webm">-->
<!--      </video>-->

      <yun-video v-if="video" :dataSrc="video"></yun-video>

      <div class="card-footer">

<!--        <div class="footer-item1" @click="MessageAlert">-->
<!--          <yun-icon  name="star" size="12px" ></yun-icon>-->
<!--          <p class="star">收藏</p>-->
<!--        </div>-->
        <div class="footer-item2" @click="MessageAlert">
          <yun-icon  name="share" size="12px" ></yun-icon>
          <p class="share">转发</p>
        </div>
        <div class="footer-item3" @click="showCommentCon=!showCommentCon">
          <yun-icon  name="comment" size="12px" ></yun-icon>
          <p class="comment">评论({{commentNumber}})</p>
        </div>
        <div :class="returnItem4Class">
          <div class="center-box"  @click="clickToPraise">
            <yun-icon  name="like1" size="12px" ></yun-icon>
            <p class="like1">赞({{praiseNum}})</p>
          </div>

          <div class="abs_down-arrow" @click="showPraiseCon=!showPraiseCon" v-if="praiseList.length>0">
            <yun-icon :class="returnItem4IconClass"  size="6px" name="down_arrow"></yun-icon>
          </div>
        </div>
      </div>

    </div>
    <transition name="fade" >
      <div class="article__praise-member" v-if="showPraiseCon&&praiseNum>0">
        <yun-icon style="margin-bottom: 8px;margin-right:15px" name="like2" size="12px" color="#FF7474"></yun-icon>
        <p class="praise-member-name" @click="changeRoute2('/u/'+val.userId+'/blog')" :key="val.userId" v-for="(val,index) in praiseList">{{val.nickName}}<span v-if="praiseTotal!==index+1">、</span></p>
        <p class="more-member" v-if="!showAllPraise" @click="dataGetAllPraiseList">...</p>
      </div>
    </transition>
    <transition name="fade" >
       <comment-con @listioncommentConNumber="dataGet2ComNum" style="margin-top: -11px" v-if="showCommentCon"  :id="postId" type="dynamic"></comment-con>
     </transition>

  </div>
  </transition>
</template>


<script>
  import Banner from './banner';
  import Dropdown from './dropdown'
  import {dateConvert} from "../../action/utils/dataConvert";
  import config from '../../action/config';
  import {globalBus} from '../common/globalBus'
  import CommentCon from './comment/commentCon';
  import YunVideo from "../common/video/src/main.vue";
  export default {
    name:'socialContactCard',
    components:{
      YunVideo,
      Banner,Dropdown,CommentCon
    },
    props:{
      info:{
        type:Object,
        default: () => ({})
      },
      pageType:{
        type:String,
        default:''
      },
      isMy:{
        type:Boolean,
        default:false
      }
    },
    data(){

      //return
      return {
        showCard:true,  //展示卡片

        src:'',
        showDrop:false,
        name:'',
        postId:'',
        content:'',
        createTime:'',
        pictures:[],
        video:'',
        userId:'',
        showBanner:false,
        currentImg:0,
        userNick:'',
        userAvatar:'',
        followedAuthor:false,
        followLoading:false,
        showCommentCon:false,
        status:0,
        praiseNum:0,
        praised:false,
        praiseList:[],
        praiseTotal:0,
        showAllPraise:true,
        showPraiseCon:true,
      }
    },
    computed:{
      imgArr2(){
        let imgArr = this.pictures;
        let imgArrL = imgArr.length;
        if(imgArrL<=9){
          return imgArr
        }else{
          return  imgArr.slice(0,9)
        }
      },
      longImg(){
        if(this.pictures.length===1){
          if(process.browser){
            let src = this.pictures[0];
            let img = new Image();
            img.src = src;
            return img.height / img.width > 1.33;
          }
          else{
            return false
          }
        }
      },
      handledContent(){
        return this.content;
        // let indexArr = [];
        // let html=``;


        // for (let i = 0; i <content.length ; i++) {
        //   let index = content.indexOf("#",i);
        //   if(index!==-1&&index===i){
        //     indexArr.push(index)
        //   }
        // }
        // if(indexArr.length>1){
        //   for (let i = 0; i < indexArr.length-1; i+=2) {
        //     let firstP = i>0?indexArr[i-1]+1:0;
        //     html = html +`${content.substring(firstP,indexArr[i])}<a href="/topic/detail/${content.substring(indexArr[i]+1,indexArr[i+1])}">${content.substring(indexArr[i],indexArr[i+1]+1)}</a>`
        //   }
        //
        //   if(indexArr.length%2!==0){
        //     html = html +   `${ content.substring(indexArr[indexArr.length-1])}`;
        //
        //   }else{
        //     html = html +   `${ content.substring(indexArr[indexArr.length-1]+1)}`;
        //
        //   }
        //   return html
        //
        // }
        // else{
        //   return content;
        // }




      },
      returnItem4Class(){
         return  this.praised ?'footer-item4-active':'footer-item4'
      },
      returnItem4IconClass(){
        return this.showPraiseCon?'icon__active':'icon'
      }
    },
    created(){
      this.dateGet2Info();
      this.dataGetPraiseList();
      if(process.browser){
        document.addEventListener('click',(e)=>{
          if(this.$refs.deleteButton){
            if(!this.$refs.deleteButton.contains(e.target)){
              this.showDrop = false;
            }
          }


        })
      }
      globalBus.$on(config.event.listenSocialCardState,(userId)=>{
        if(userId===this.userId){
          this.followedAuthor = true;
        }
      })

    },
    methods:{

      changeRoute2(r){
        let routeUrl = this.$router.resolve({
          path: r
        });
        window.open(routeUrl.href,'_blank')
      },
      dataGet2ComNum(n){
        this.commentNumber = this.commentNumber +n
      },
      MessageAlert(){
        this.$message({
          type:'info',
          message:'该功能尚未启用'
        })
      },
      clickToOpenBanner(index){
        this.showBanner = true;
        this.currentImg = index
      },
      clickToShowDrop(){
        this.showDrop=!this.showDrop
      },
      dateGet2Info(){
        let info = this.info;
        if(this.info.postId){
          this.content = info.content;
          this.postId = info.postId;
          this.pictures = info.pictures===null?[]:info.pictures;
          this.video = info.video;
          this.createTime = dateConvert(info.createTime);
          this.userId = info.userId;
          this.userNick = info.userNick;
          this.userAvatar = info.userAvatar;
          this.followedAuthor = info.followedAuthor;
          this.commentNumber = info.commentNumber;
          this.status = info.status;
          this.praiseNum = info.praiseNum;
          this.praised = info.praised;
        }
      },
      showAlert(id){
        this.$alert('确认删除？', '', {
          confirmButtonText: '确定',
          callback: action => {

            this.dateDeleteCard(id)
          }
        });
      },
      dateDeleteCard(id){
        this.$axios.$delete(config.api.delete.Post.delete+id).then((response)=>{
          if(response.code===0){
            // this.$emit(config.event.listenSocialCardState,1);
            this.showCard = false;
            this.$message({
              type:'success',
              message:'删除成功！'
            })
          }else{
            this.$message({
              type:'warning',
              message:'删除失败！'
            })
          }
        })


      },
      dataPostFollowUser(){
         this.followLoading = true;
         this.$axios.$post(config.api.post.User.follow+this.userId+'/follower').then((response)=>{
           if(response.code===0){
             this.$message({
               type:'success',
               message:'关注成功！'
             })
             this.followLoading = false;
             this.followedAuthor = true;
             globalBus.$emit(config.event.listenSocialCardState,this.userId)
           }else{
             this.followLoading = false;
             this.$message({
               type:'warning',
               message:response.msg
             })
           }
         })

      },
      clickToPraise(){
        if(this.praised){
          this.dataDeletePraise();
        }else{
          this.dataPostPraise()
        }

      },
      dataGetPraiseList(){
        this.$axios.$get(config.api.post.PostPraise.praise+this.postId+'/praises',{
          params:{
            page:1,
            size:9,
          }
        }).then((response)=>{

          if(response.code===0){
            this.showAllPraise = response.data.totalRecords <= 9;
            this.praiseList = response.data.dataList;
            this.praiseTotal = response.data.totalRecords;
          }
        })

      },
      dataGetAllPraiseList(){
        this.$axios.$get(config.api.post.PostPraise.praise+this.postId+'/praises',{
          params:{
            page:1,
            size:this.praiseTotal,
          }
        }).then((response)=>{

          if(response.code===0){
            this.showAllPraise = true;
            this.praiseList = response.data.dataList;
            this.praiseTotal = response.data.totalRecords;
          }
        })

      },
      dataPostPraise(){
        this.$axios.$post(config.api.post.PostPraise.praise+this.postId+'/praise').then((response)=>{

          if(response.code===0){
            this.$message({
              type:'success',
              message:'点赞成功'
            })
            this.praised = true;
            this.praiseNum = this.praiseNum +1;
            this.dataGetPraiseList();
          }else if(response.code===1000){
            this.$message({
              type:'warning',
              message:'请在登陆后操作'
            })
          }
        })

      },
      dataDeletePraise(){
        this.$axios.$delete(config.api.delete.PostPraise.praise+this.postId+'/praise').then((response)=>{
          if(response.code===0){
            this.$message({
              type:'success',
              message:'取消点赞'
            })
            this.praised = false;
            this.praiseNum = this.praiseNum -1;
            this.dataGetPraiseList();

          }else if(response.code===1000){
            this.$message({
              type:'warning',
              message:'请在登陆后操作'
            })
          }
        })
      }


    },

  }
</script>


<style lang="scss" >
  img{
    max-width: none;
    max-height: none;
  }

  .social-card__wrap{
    margin-top: 16*$length;
    .social-card{
      width:816*$length;
      box-sizing: border-box;
      padding:  25*$length 24*$length 0;
      background-color: #fff;
      border-radius:4*$length;

      .card_header{
        @extend %flex-row-spb;
        align-items:flex-start;
        .header-l{
          @extend %flex-row-spb;
          .header-l__info{
            margin-left:12*$length;

            .header-l__info-top{
              @extend %flex-row-spb;
              justify-content: flex-start;
              .name{
                @include fontStyle(14,19,500,#222,left);
                @extend %animate-transition;
                @extend %cursorPointer;
                &:hover{
                  color:#001;
                }
              }
              .nickname{
                @include fontStyle(14,19,500,#888,left);
              }
              .follow2{
                margin-left: 22*$length;

                @include fontStyle(14,19,500,#55B946,left);
                @extend %cursorPointer;

                i{
                  animation: LoadingTurn 1.2s infinite;
                }
                @keyframes LoadingTurn {
                  from {
                    transform: rotate(0deg);
                  }
                  to{
                    transform: rotate(360deg);
                  }
                }
              }
              .follow1{
                margin-left: 22*$length;

                @include fontStyle(14,19,500,#666,left);
                @extend %cursorPointer;
              }
              .follow3{
                margin-left: 22*$length;

                @include fontStyle(14,19,500,#1890ffb0,left);
                @extend %cursorPointer;
              }

            }
            .header-l__info-bottom{
              margin-top:12*$length;
              @extend %flex-row-spb;

              .date{
                @include fontStyle(14,19,500,#888,left);
              }
              .limits{
                margin-left: 25*$length;
                @include fontStyle(14,19,500,#888,left);
              }
            }
          }
        }
        .header-r{
          position:relative;
          .label-box__err{
            color:#fff;
            background-color: #f11818;
          }
          .label-box__zero{
            color:#fff;
            background-color: #ff780091;
          }
          .label-box__pass{
            color:#fff;
            background-color: #11ef1fb0;
          }
          > p{
            position: absolute;
            width:40px;
            top:3px;
            right:30*$length;
            display: inline-block;
            margin-right:10*$length;
            padding:2*$length 8*$length;
            background-color: #F4F8FA;
            @include border-radius(2*$length);
            @include fontStyle(12,16,500,#999,center);
            @extend %animate-transition;
            @extend %cursorPointer;
          }
        }
      }

      .card-content__word{
        margin-top: 26*$length;
        @include fontStyle(14,24,400,#222,left);
        height:auto;
        a{
          @extend %cursorPointer;
          color:#00AAE6;
          margin-left:3px;
          margin-right: 3px;
        }
      }

      .card-content__img1{
        @extend %flex-row-spb;
        justify-content: flex-start;
        .img-box{
          margin-top: 16*$length;
          overflow: hidden;

          width:180*$length;
          height:180*$length;
          margin-right:16*$length;
          border-radius: 4*$length;
          @extend %flex-column-center;
          @extend %cursorPointer;

          img{
            width:auto;
            height:100%;
          }
        }

      }

      .card-content__img2{
        width:572*$length;
        @extend %flex-row-spb;
        justify-content: flex-start;

        flex-wrap: wrap;
        .img-box{
          margin-top: 16*$length;
          position:relative;
          overflow: hidden;
          width:180*$length;
          height:180*$length;
          margin-right:16*$length;
          border-radius: 4*$length;
          @extend %flex-column-center;
          @extend %cursorPointer;
          img{
            width:auto;
            height:100%;
          }
          .abs{
            position:absolute;
            border-radius: 4*$length;
            top:0;
            height:100%;
            left:0;
            width:100%;
            background-color: rgba(34,31,40,.3);
            @include fontStyle(20,180,700,#fff,center);

          }
        }


      }

      .card-content__img3{
        @extend %flex-row-spb;
        justify-content: flex-start;
        .img-box{
          margin-top: 16*$length;
          overflow: hidden;
          width:360*$length;
          border-radius: 4*$length;
          @extend %flex-column-center;
          @extend %cursorPointer;

          img{
            width:100%;
            height:auto;
          }
        }

      }

      .card-content__img4{
        @extend %flex-row-spb;
        justify-content: flex-start;
        .img-box{
          margin-top: 16*$length;
          overflow: hidden;
          width:270*$length;
          height:360*$length;
          border-radius: 4*$length;
          @extend %flex-column-center;
          @extend %cursorPointer;

          position:relative;
          img{
            width:100%;
            height:auto;
          }
          .abs{
            position:absolute;
            bottom:0;
            right:0;
            width:40*$length;
            @include fontStyle(14,22,500,#fff,center);
            background-color: #ff4500;
            border-radius: 4*$length;

          }
        }

      }

      .pack-up{
        @extend %cursorPointer;
        @include fontStyle(14,90,500,#00AAE6,left)
      }
      .dynamic-video{
        margin-top: 16*$length;

        width:auto;
        height:auto;
        max-width: 100%;
        max-height: 500*$length;
      }

      .card-footer{
        margin-top:24*$length;
        padding:14*$length 0;
        border-top: 1px dashed #EFEFEF;
        @extend %flex-row-spb;
        .footer-item1{
          @extend %cursorPointer;
          width:25%;
          @extend %flex-row-center;
          &:hover{
            i{
              color:#F8A06F
            }
            p{
              color:#F8A06F
            }

          }
          p{
            margin-left:8*$length;
            @include fontStyle(12,16,500,#666,center);
          }
          i{
            color:#ccc;
            padding-bottom: 3px;
          }
        }
        .footer-item2{
          @extend %cursorPointer;
          width:25%;
          @extend %flex-row-center;
          &:hover{
            i{
              color:#00AAE6
            }
            p{
              color:#00AAE6
            }

          }
          p{
            margin-left:8*$length;
            @include fontStyle(12,16,500,#666,center);
          }
          i{
            color:#ccc;
            padding-bottom: 2px;
          }
        }
        .footer-item3{
          @extend %cursorPointer;
          width:25%;
          @extend %flex-row-center;
          &:hover{
            i{
              color:#75D098
            }
            p{
              color:#75D098
            }

          }
          p{
            margin-left:8*$length;
            @include fontStyle(12,16,500,#666,center);
          }
          i{
            color:#ccc;
            padding-bottom: 2px;
          }
        }
        .footer-item4{
          position: relative;
          @extend %cursorPointer;
          width:25%;
          @extend %flex-row-center;
          .abs_down-arrow{
            position: absolute;
            right:0;
            top:0;
            height:100%;
            z-index: 100;
            width:30*$length;
            @extend %flex-row-center;
            .icon{
              font-size: 12*$font-size;
              color:#ccc;
            }
            .icon__active{
              font-size: 12*$font-size;
              color:#00AAE6;
              transform: rotate(180deg);
            }
          }

          .center-box{
            &:hover{
              i{
                color:#FF7474
              }
              p{
                color:#FF7474
              }
            }

            width: calc( 100% - 60px);
            @extend %flex-row-center;
            p{
              margin-left:8*$length;
              @include fontStyle(12,16,500,#666,center);
            }
            i{
              color:#ccc;
              padding-bottom: 2px;
            }
          }



        }
        .footer-item4-active{
          position: relative;
          @extend %cursorPointer;
          width:25%;
          @extend %flex-row-center;
          .abs_down-arrow{
            position: absolute;
            right:0;
            top:0;
            height:100%;
            width:30*$length;
            @extend %flex-row-center;
            .icon{
              font-size: 12*$font-size;
              color:#ccc;
            }
            .icon__active{
              font-size: 12*$font-size;
              color:#00AAE6;
              transform: rotate(180deg);
            }
          }
          .center-box{
            &:hover{
              i{
                color:#FF7474
              }
              p{
                color:#FF7474
              }
            }

            width: calc( 100% - 60px);
            @extend %flex-row-center;
            p{
              margin-left:8*$length;
              @include fontStyle(12,16,500,#FF7474,center);
            }
            i{
              color:#FF7474;
              padding-bottom: 2px;
            }
          }

        }


      }

    }

    .article__praise-member{
      box-sizing: border-box;
      width:816*$length;
      padding:20*$length 40*$length;
      margin-top: 5*$length;
      border-radius:4*$length;
      background-color: #Fff;
      @extend %flex-row-spb;
      justify-content: flex-start;

      flex-wrap: wrap;

      .praise-member-name{
        margin-bottom: 8*$length;
        @include fontStyle(12,22,500,#00AAE6,center);
        @extend %cursorPointer;
        @extend %animate-transition;
        margin-left: 8*$length;

        span{
          color:#000;
          margin-left: 5*$length;
        }
        &:hover {
          color:#00AAE6
        }
      }

      .more-member{
        margin-left: 20*$length;
        margin-bottom: 8*$length;
        @include fontStyle(12,22,500,#333,center);
        @extend %cursorPointer;
        @extend %animate-transition;
        &:hover {
          color:#00AAE6
        }
      }

    }
  }

</style>
